<template>
  <div class="communication-box">
    <div class="communication-head">组件通信</div>
    <div class="communication-head">props 和 emit</div>
    <div class="communication-div">
      <div>父组件</div>
      <a-input
        placeholder="利用props传给子组件"
        v-model="propsData"
        style="width:20%"
      />
      <div>子组件用事件传递过来的值 ： {{ childData }}</div>
      <child :propsData="propsData" @toParent="getChildData">
        <template v-slot:default="rrr">
          hhhhh
          {{ rrr }}
        </template>
        <template v-slot:aaa="ppp">
          qqqqqqq
          {{ ppp }}
        </template>
      </child>
    </div>
    <div class="communication-head">eventBus</div>
    <div class="communication-div">
      <div>父组件</div>
      <div>eventBus传来的值 ： {{ name }}</div>
      <child2></child2>
    </div>
    <div class="communication-head">vuex</div>
    <div class="communication-div">
      <div>父组件</div>
      <div>在vuex中获得的值 ： {{ dataCase }}</div>
      <div><a-button @click="getDataCase()">获取vuex数据</a-button></div>
      <child3></child3>
    </div>
    <div class="communication-head">$attr 和 $listeners</div>
    <div class="communication-div">
      <div>父组件</div>
      <a-input
        placeholder="利用$attr传给子组件"
        v-model="attrData"
        style="width:20%"
      />
      <child4 :attrData="attrData" aaa="aaa" bbb="bbb"></child4>
    </div>
    <div class="communication-head">provide 和 inject</div>
    <div class="communication-div">
      <div>父组件</div>
      <div>利用provide传给后代组件</div>
      <child5></child5>
    </div>
    <div class="communication-head">$parent / $children与 ref</div>
    <div class="communication-div">
      <div>父组件</div>
      <div>用ref访问子组件</div>
      <div>
        <a-button @click="refGetChildData()">通过ref访问子组件</a-button>
      </div>
      <child6 ref="child6"></child6>
    </div>
  </div>
</template>

<script>
import child from "./components/child";
import child2 from "./components/child2";
import child3 from "./components/child3";
import child4 from "./components/child4";
import child5 from "./components/child5";
import child6 from "./components/child6";
export default {
  name: "communication",
  components: { child, child2, child3, child4, child5, child6 },
  data() {
    return {
      propsData: "props传值",
      childData: "",
      name: "",
      dataCase: "",
      attrData: ""
    };
  },
  provide: {
    proData: "使用provide传给后代"
  },
  mounted() {
    this.$eventBus.$on("getName", name => {
      this.name = name;
    });
  },
  methods: {
    getChildData(val) {
      this.childData = val;
    },
    getDataCase() {
      // this.dataCase = this.$store.state.dataCase;
      this.dataCase = this.$store.getters.getDataCase;
    },
    refGetChildData() {
      this.$refs.child6.getDataSource();
    }
  }
};
</script>

<style lang="less" scoped>
.communication-box {
  padding: 20px;
  text-align: center;
  font-size: 18px;
  .communication-head {
    text-align: center;
    font-size: 20px;
  }
  .communication-div {
    margin: 10px;
    color: #758a99;
    background: #e3f9fd;
    line-height: 30px;
    padding: 15px;
  }
}
</style>
